<template>
    <div>
        <el-button type="success" @click="isShowDialog('insert')" icon="el-icon-plus">新增</el-button>
        <!-- 查询 -->
        <el-popover placement="bottom-start" width="1000" style="box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" :model="keywords">
                <el-form-item label="医院名称">
                    <el-input v-model="keywords.hospitalName"  ></el-input>
                </el-form-item>
                <el-form-item label="医院别名">
                 <el-input v-model="keywords.hospitalAlias"  ></el-input>
                </el-form-item>
                <el-form-item label="医院级别">
                 <el-input v-model="keywords.tags"  ></el-input>
                </el-form-item>
                <el-form-item label="地址">
                 <el-input v-model="keywords.location"  ></el-input>
                </el-form-item>
                 <el-form-item label="省">
                 <el-input v-model="keywords.province"  ></el-input>
                </el-form-item>
                 <el-form-item label="市">
                 <el-input v-model="keywords.city"  ></el-input>
                </el-form-item>
                 <el-form-item label="开设门诊">
                 <el-input v-model="keywords.department"  ></el-input>
                </el-form-item>
                <el-button type="primary" @click="searchBtn" icon="el-icon-search">查询</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>
        <!-- 搜索 -->
        <!-- 表格 -->
        <el-table :data="tabaleData" :highlight-current-row="true" stripe border class="table-index"  style="width: 100%;" :height="tableHeight"
        :header-cell-style="getRowClass" v-loading="loading">
            <el-table-column  type="index" label="*"   min-width="40"  fixed="left"></el-table-column>
            <el-table-column prop="hospitalName" label="医院名称"  sortable min-width="180"></el-table-column>
            <el-table-column prop="hospitalAlias" label="医院别名" sortable   min-width="120"></el-table-column>
            <el-table-column prop="tags" label="医院级别" sortable min-width="120"></el-table-column>
            <el-table-column prop="location" label="地址" sortable  min-width="120"></el-table-column>
            <el-table-column prop="phone" label="电话" sortable  min-width="140"></el-table-column>
            <el-table-column prop="province" label="省" sortable show-overflow-tooltip min-width="140"></el-table-column>
             <el-table-column prop="city" label="市" sortable show-overflow-tooltip  min-width="240"></el-table-column>
            <el-table-column prop="department" label="开设门诊" sortable  show-overflow-tooltip min-width="120"></el-table-column>
            <el-table-column prop="importantDepartment" label="重点科室" show-overflow-tooltip sortable  min-width="140"></el-table-column>
            <el-table-column  label="操作" align="center" width="100" fixed="right">
                <template slot-scope="scope">
                    <el-button @click="isShowDialog('update',scope.row)" type="text" size="mini">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
         <!-- 基础信息编辑 -->

        <el-dialog :title="dialog.title" width="900px" center :visible.sync="dialog.isShow" :close-on-click-modal="false" v-dialogDrag>
            <div :style="tableDialogHeightTabPane">
                <el-form :inline="true" class="demo-form-inline" v-model="dialog.fromData" label-position="right" label-width="180px">
                    <el-form-item label="医院名称"><el-input v-model="dialog.fromData.hospitalName" ></el-input></el-form-item>
                    <el-form-item label="医院别名"><el-input v-model="dialog.fromData.hospitalAlias"  ></el-input></el-form-item>
                    <el-form-item label="医院级别"><el-input v-model="dialog.fromData.tags" ></el-input></el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="dialog.fromData.location" ></el-input>
                    </el-form-item>
                    <el-form-item label="电话"><el-input v-model="dialog.fromData.phone" ></el-input></el-form-item>
                    <el-form-item label="省"><el-input v-model="dialog.fromData.province"></el-input></el-form-item>
                    <el-form-item label="市"><el-input v-model="dialog.fromData.city"></el-input></el-form-item>
                    <el-form-item label="开设门诊"><el-input v-model="dialog.fromData.department"></el-input></el-form-item>
                    <el-form-item label="重点科室"><el-input v-model="dialog.fromData.importantDepartment"></el-input></el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="submitList" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import yxbHttp from '@/axios/yxbHttp.js'
export default {
    data(){
        return {

            tableHeight: document.documentElement.clientHeight - 170,/**表格高度 */
            loading:false,/**加载参数 */
            tabaleData:[],/**表格数据列表 */
            keywords:{
                hospitalName:'',
                hospitalAlias:'',
                tags:'',
                location:'',
                province:'',
                city:'',
                department:''
            },/**关键字 */
            dialog:{/**弹框配置 */
                title:'',
                isShow:false,
                fromData:{}
            },
            tableDialogHeightTabPane:{/**dialog style */
                height: (document.documentElement.clientHeight - 300) + 'px',
                overflowY: 'auto'
            },
            pagination:{/**分页 */
                pageSize:10,
                currentPage:1,
                total:0
            }
        }
    },
    created(){
        let  self = this;
        self.getTableDate();
    },
    methods:{
        getTableDate(){/**获取表格内容 */
            let self = this;
            let params={
                currentPage:self.pagination.currentPage,
                pageSize:self.pagination.pageSize,
                hospitalName:self.keywords.hospitalName,
                hospitalAlias:self.keywords.hospitalAlias,
                tags:self.keywords.tags,
                location:self.keywords.location,
                province:self.keywords.province,
                city:self.keywords.city,
                department:self.keywords.department
            }
            self.loading=true;
            yxbHttp.hospitalList(params).then(res=>{
                 self.loading=false;
                self.tabaleData = res.content.records;
                self.pagination.total=res.content.total
            },error=>{
                 self.loading=false;
            })
        },
        handleSizeChange(size){/**改变分页条数 */
            this.pagination.pageSize=size;
            this.pagination.currentPage=1;
            this.getTableDate()
        },
        handleCurrentChange(current){/**改变分页页码 */
            this.pagination.currentPage = current;
            this.getTableDate();
        },
        searchBtn(){/**点击搜索 */
            this.pagination.currentPage=1;
            this.getTableDate();
        },
        isShowDialog(type,row){/**点击弹出新增或编辑弹框 */
            let self = this;
            self.dialog.isShow=true;
            self.dialog.title= type==="insert"?"新增":"编辑";
            self.dialog.fromData = type==="insert" ? {}:row
        },
        submitList(){/**新增或编辑供应商基础信息 */
            let self = this;
            let type = self.dialog.title==="新增"?'insert':'update';
            //self.dialog.fromData.createTime = self.dialog.fromData.createTime?self.timestampToTime1(self.dialog.fromData.createTime,'yy-mm-dd hh:mm:ss'):null;
            yxbHttp.addUpdateHospital(type, self.dialog.fromData).then(res=>{
                self.dialog.isShow=false;
                self.getTableDate();
                self.$message.success(`${self.dialog.title}成功`);
            },error=>{
                 self.$message.error(`${self.dialog.title}失败`)
            })
        }
    }
}
</script>
<style scoped>
</style>
